import React, { MemoExoticComponent, useEffect, useState } from "react"
import * as  material from "../material/index"



export const LowCodeContext = React.createContext<LowCodeProviderProps>({
  components: {},
  ComponentWrapper:null ,
  items:{},
  store:{},
  setItems:()=>{},
  setStore:()=>{},
  children:null
});


interface LowCodeProviderProps {
  ComponentWrapper?: MemoExoticComponent<(p: any) => React.ReactNode>|null,
  items: any,
  setItems: any
  store?: any,
  setStore?: any
  children?: React.ReactNode,
  components: any
}
export const LowCodeProvider = ({ ComponentWrapper, items, setItems, children, components }: LowCodeProviderProps) => {
  const [store,setStore] = useState({});
//  console.log('ComponentWrapper',ComponentWrapper)
//  debugger 
//  useEffect(() => {
//     if (!items) {
//       setItems({
//         label: "页面",
//         title: '页面',
//         _id: uniqueId(),
//         isPageContainer: true,
//         isContainer: true,
//         properties: {
//           "x-component": "PageContainer",
//           "x-component-props": {
//             items: []
//           },
//         },
//       })
//     }
//   }, [items])
  return (
    <LowCodeContext.Provider
      value={{
        ComponentWrapper,
        items,
        setItems,
        store,
        setStore,
        components:{
          ...material,
          ...components
        }
      }}
    >
      {children}
    </LowCodeContext.Provider>
  );
};
export default LowCodeProvider